<template>
  <div class="doctor-inquiry">
    <div class="inquiry-head">
      <p class="head-nav">
        <span>当前有{{inquiryList.length}}人等待</span>
        <Dropdown v-if="inquiryList.length" @command="handleCommand">
          <span class="el-dropdown-link">
            切换候诊人
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <DropdownMenu slot="dropdown">
            <DropdownItem
              v-for="item in inquiryList"
              :key="item._id"
              :command="item"
            >{{item.patient.realname}}</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </p>
      <Button type="primary" size="small">结束问诊</Button>
    </div>
    <div class="inquiry-content">
      <div class="inquiry-content-left">
        <div class="basic-message">
          <div class="message-personal">
            <img :src="getImageUrl(info.avatar,info.gender)" alt />
            <span class="message-name">{{info.name}}</span>
          </div>
          <div class="message-table">
            <div class="tableOne">
              <p>
                性别：
                <span>{{info.sex}}</span>
              </p>
            </div>
            <div class="tableTwo">
              <p>
                年龄：
                <span>{{info.age}}</span>
              </p>
            </div>
          </div>
          <div class="message-tel">
            <p>
              电话：
              <span>{{info.tel}}</span>
            </p>
          </div>
          <div class="message-remark">
            <p>
              备注：
              <span>{{info.remark}}</span>
            </p>
          </div>
        </div>
        <div class="observed-message">
          <div class="observed-title">
            <span>本次测量值</span>
            <span @click="handleEdit">
              <i class="el-icon-edit"></i>编辑
            </span>
          </div>
          <div>
            <p>
              身&nbsp;&nbsp;&nbsp;高：
              <span>{{infodata.height}}</span>
            </p>
          </div>
          <div>
            <p>
              体&nbsp;&nbsp;&nbsp;重：
              <span>{{infodata.weight}}</span>
            </p>
          </div>
          <div>
            <p>
              体&nbsp;&nbsp;&nbsp;温：
              <span>{{infodata.teper}}</span>
            </p>
          </div>
          <div>
            <p>
              舒张压：
              <span>{{infodata.pressure}}</span>
            </p>
          </div>
          <div>
            <p>
              收缩压：
              <span>{{infodata.systolic}}</span>
            </p>
          </div>
        </div>
        <!--编辑界面-->
        <div>
          <Dialog title="测量值编辑" :visible.sync="dialogEditVisible" :close-on-click-modal="false">
            <Form
              label-position="left"
              label-width="60px"
              style="width: 600px; margin-left:50px;"
              :model="editinfo"
            >
              <FormItem label="身高" prop="height">
                <Input v-model="editinfo.height" />
              </FormItem>
              <FormItem label="体重" prop="weight">
                <Input v-model="editinfo.weight" />
              </FormItem>
              <FormItem label="体温" prop="teper">
                <Input v-model="editinfo.teper" />
              </FormItem>
              <FormItem label="舒张压" prop="pressure">
                <Input v-model="editinfo.pressure" />
              </FormItem>
              <FormItem label="收缩压" prop="systolic">
                <Input v-model="editinfo.systolic" />
              </FormItem>
            </Form>
            <div slot="footer" class="dialog-footer">
              <Button type="primary" @click="editSubmit">确定</Button>
              <Button type="primary" @click="editReset">重置</Button>
              <Button @click="editCancel">取消</Button>
            </div>
          </Dialog>
        </div>
        <Dialog title :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
          <Button @click="getPdf('#pdfDom')" icon="el-icon-download">下载pdf</Button>
          <ul id="pdfDom">
            <li class="w-oul" v-for="(item, index) in caseList" :key="index">
              <p>就诊时间: {{ moment(item.createtime).format('lll') }}</p>
              <p>主诉: {{ item.chiefComplaint || '无' }}</p>
              <p>体格检查: {{ item.physicalExamination || '无' }}</p>
              <p>辅助检查: {{ item.supplementaryExamination || '无' }}</p>
              <p>诊断结果: {{ item.diagnosis || '无' }}</p>
            </li>
          </ul>
        </Dialog>
        <div class="past-history">
          <div class="past-title">
            <span>过往/家族病史</span>
          </div>
          <div class="disease-item" v-for="(item,index) in diseaseData" :key="index">
            <p>{{item}}</p>
          </div>
          <div class="past-foot">
            <p>没有更多的诊断结果</p>
          </div>
        </div>
        <Button type="primary" @click="dialogVisible=true">患者病例</Button>
      </div>
      <div class="inquiry-content-right">
        <div class="content-title">
          <p>问诊信息</p>
        </div>
        <div class="content-head">
          <p>
            就诊时间：
            <span>{{currentTime}}</span>
          </p>
          <p>
            就诊医生：
            <span>{{per.job}}-{{per.name}}</span>
          </p>
          <p>
            药物过敏：
            <span>{{allergy.length?allergy.join(' '):'--'}}</span>
          </p>
          <p class="radio">
            <Radio class="radio-item" v-model="radio" label="1">初诊</Radio>
            <Radio class="radio-item" v-model="radio" label="2">复诊</Radio>
          </p>
        </div>
        <div class="content-main">
          <Tabs type="border-card">
            <TabPane label="病历">
              <Record :inquiryid="inquiryid" />
            </TabPane>
            <TabPane label="医嘱">
              <Advices :patientid="patientid" :inquiryid="inquiryid" />
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
    <Badge :value="$store.state.doctorStore.newMessage[inquiryid] ? 'new' : ''" class="inquiry-message">
      <i class="el-icon-message" @click="showRoom"></i>
    </Badge>
    <div class="chatroom" v-show="roomVisible">
      <Chatroom :inquiryid="inquiryid" :patient="info"></Chatroom>
    </div>
  </div>
</template>

<script>
import { getImageUrl, getDInquiry, getDRecord, getPUser, putDInquiry } from '@/api/api'
import Record from './record'
import Advices from './advices'
import socket from '@/api/api/DOCwebsocket';
import Chatroom from './chatroom'
import moment from 'moment'
import { Dropdown, DropdownItem, Notification, Message, DropdownMenu, Button, Badge, Radio, TabPane, Tabs, Dialog, Form, Input, FormItem, MessageBox } from 'element-ui'
export default {
  components: {
    Dropdown,
    DropdownItem,
    DropdownMenu,
    Badge,
    Radio,
    Button,
    TabPane,
    Tabs,
    Advices,
    Record,
    Dialog,
    Form,
    Input,
    FormItem,
    Chatroom
  },
  data() {
    return {
      inquiryList: [],
      roomVisible: false,
      dialogVisible: false,
      info: { // 当前诊断患者信息
        name: 'rxf',
        age: 10,
        sex: '男',
        remark: '无',
        tel: '15735151986',
        id: ''
      },
      infodata: {
        height: '--',
        weight: '--',
        teper: '--',
        pressure: '--',
        systolic: '--'
      },
      htmlTitle: '患者病历',
      diseaseData: [],
      currentTime: '',
      allergy: [], // 药物过敏
      per: JSON.parse(localStorage.getItem('doc_per')),
      inquiryid: '', // 当前诊断id
      patientid: '', // 当前患者id
      radio: '', // 保存是否复诊 1-初诊 2-复诊
      dialogEditVisible: false, // 编辑弹框
      editinfo: {
        height: '',
        weight: '',
        teper: '',
        pressure: '',
        systolic: ''
      },
      caseList: [] // 患者病历
    }
  },
  async created() {
    socket.on('inquiryCheck', msg => {
      // console.log(JSON.parse(msg));
      console.log(msg, '-------msg')
      msg = JSON.parse(msg);
      let name = '';
      this.inquiryList.map(item => {
        if (item._id === msg.inquiryid) {
          name = item.patient.realname;
        }
      });
      if (msg.type === 0) {
        // 结束
        Notification.info({
          title: '消息',
          message: name + '结束了本次问诊'
        });
      } else {
        Notification.info({
          title: '消息',
          message: '有新的患者咨询'
        });
      }
      this.getInquiryList().then(result => { })
    });
    await this.getInquiryList()
    // 当前诊断时间
    this.currentTime = new Date().toLocaleString()
    // 请求候诊病人数据
  },
  methods: {
    getImageUrl,
    moment,
    showRoom() {
      this.roomVisible = !this.roomVisible
      console.log(this.roomVisible)
    },
    handleClose() {
      this.dialogVisible = false
    },
    loadCase(id) {
      getDInquiry({ patientid: id, $sort: JSON.stringify({ createtime: '-1' }) }).then(res => {
        if (res.code === 200) {
          this.caseList = res.data
        }
      })
    },
    async getInquiryList() {
      // 获取当前医生所有会诊信息
      getDInquiry({ doctorid: localStorage.getItem('doctor_id'), status: 1 }).then(res => {
        if (res.code === 200) {
          const inquiryList = res.data;
          console.log(inquiryList)
          const patientIdList = inquiryList.map(item => item.patientid);
          getDRecord({ userid: JSON.stringify(patientIdList) }).then(res => {
            if (res.code === 200) {
              const patientList = {};
              res.data.map(item => {
                patientList[item.userid] = item;
              });
              inquiryList.map(item => {
                item.patient = patientList[item.patientid];
              });
              this.inquiryList = inquiryList
              if (!this.inquiryid && inquiryList.length > 0) {
                // this.inquiryid = inquiryList[0]._id;
                this.patientChange(inquiryList[0]);
              }
            }
          })
          this.$store.dispatch(
            'doctorStore/getInquiryMessage',
            inquiryList.map(item => item._id)
          )
        }
      })
    },
    async patientChange(data) {
      this.inquiryid = data._id;
      this.patientid = data.patientid;
      this.loadCase(data.patientid);
      const record = data.patient;
      this.diseaseData = [...record.disease, ...record.fdisease]
      this.infodata = {
        height: record.height,
        weight: record.weight,
        teper: '--',
        pressure: '--',
        systolic: '--'
      }
      const res = await getPUser({ _id: data.patientid })
      if (res.code === 200) {
        // 获取成功
        console.log(res.data, 'avatar')
        this.info.avatar = res.data[0].avatar; //, record.gender);
        this.info.name = record.realname;
        this.info.sex = record.gender === 1 ? '男' : '女';
        this.info.gender = record.gender;
        this.info.tel = record.phonenumber;
        this.info.id = res.data[0]._id;
        this.info.age = new Date(+new Date() - new Date(record.birthday)).getFullYear() - 1970;
      }
      this.caseList.map(item => {
        if (item.disease) {
          this.diseaseData.push(item.disease);
        }
        if (item.drugallergy) {
          this.allergy.push(item.drugallergy);
        }
        if (item.goodsallergy) {
          this.allergy.push(item.goodsallergy);
        }
      })
    },
    handleCommand(item) { // 切换候诊人
      this.patientChange(item)
    },
    handleEdit() { // 点击本次测量值编辑按钮
      this.dialogEditVisible = true;
      this.editinfo = JSON.parse(JSON.stringify(this.infodata));
    },
    // 编辑弹框  点击确定
    editSubmit() {
      MessageBox.confirm('确认提交吗？', '提示').then(res => {
        putDInquiry(this.inquiryid, this.editinfo).then(res => {
          console.log(res)
          if (res.code === 200) {
            Message({
              type: 'success',
              message: '修改成功'
            })
            this.infodata = this.editinfo
          }
          this.dialogEditVisible = false;
        })
      })
    },
    // 编辑弹框  点记重置
    editReset() {
      this.editinfo = {
        height: '',
        weight: '',
        teper: '',
        pressure: '',
        systolic: ''
      }
    },
    editCancel() {
      this.dialogEditVisible = false;
    }
  }
}
</script>

<style lang="scss">
@import "@/assets/scss/index.scss";
.doctor-inquiry {
  .inquiry-head {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > .head-nav {
      span {
        font-size: $font-size-xxl;
      }
      .el-dropdown {
        margin-left: 10px;
        font-size: $font-size-xxl;
      }
    }
  }
  .inquiry-message {
    position: fixed;
    bottom: 10px;
    right: 50px;
    .el-icon-message {
      font-size: 46px;
    }
  }
  .w-oul {
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    padding: 15px 0;
    border-radius: 10%;
    margin-top: 7px;
  }
  .inquiry-content {
    padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
    .inquiry-content-left {
      flex: 1;
      .basic-message,
      .past-history,
      .observed-message {
        margin-bottom: 20px;
        background: #fff;
        border-radius: 12px;
      }
      .basic-message {
        .message-personal {
          padding: 20px 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: 30%;
            height: 100px;
          }
          .message-name {
            margin-top: 10px;
            font-size: 20px;
          }
        }
        > div:not(:nth-child(1)) {
          height: 50px;
          line-height: 50px;
        }
        p {
          padding-left: 10px;
        }
        .message-table {
          display: flex;
          > div {
            flex: 1;
          }
          .tableOne {
            border-right: 1px solid #eee;
          }
        }
        > div:not(:nth-last-child(1)) {
          border-bottom: 1px solid #eee;
        }
      }
      .observed-message {
        .observed-title {
          padding: 0 10px;
          display: flex;
          align-items: center;
          height: 60px;
          justify-content: space-between;
          span {
            font-size: 20px;
          }
          i.el-icon-edit {
            font-size: 20px;
            margin-right: 5px;
          }
        }
        > div:not(:nth-child(1)) {
          height: 50px;
          line-height: 50px;
          padding-left: 10px;
        }
        > div:not(:nth-last-child(1)) {
          border-bottom: 1px solid #eee;
        }
      }
      .past-history {
        .past-title,
        .past-foot {
          height: 60px;
          line-height: 60px;
          padding-left: 10px;
          span {
            font-size: 20px;
          }
        }
        .past-foot {
          color: #ccc;
          p {
            font-size: 20px;
          }
        }
        .disease-item {
          padding-left: 10px;
          height: 50px;
          line-height: 50px;
          p {
            color: #f00;
          }
        }
        > div:not(:nth-last-child(1)) {
          border-bottom: 1px solid #eee;
        }
      }
    }
    .inquiry-content-right {
      flex: 3;
      margin-left: 30px;
      border-radius: 12px;
      background: #fff;
      .content-title {
        height: 80px;
        line-height: 80px;
        padding-left: 20px;
        border-bottom: 1px solid #eee;
        p {
          font-size: 22px;
          font-weight: bold;
        }
      }
      .content-head {
        padding: 20px 20px 50px 20px;
        border-bottom: 1px solid #eee;
        p {
          line-height: 40px;
          font-weight: bold;
          font-size: 18px;
          span {
            font-size: 18px;
            color: #666;
          }
        }
        .radio {
          float: right;
          span {
            color: #000;
            font-weight: 500;
          }
        }
      }
      .content-main {
        padding: 20px;
      }
    }
  }
  .chatroom {
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 600px;
    height: 500px;
    background: #f3f3f3;
    border-radius: 20px;
    z-index: 2;
  }
}
</style>

